<template>
  <div>

    <div class="row">
      <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box grey-cascade">
          <transition name="fade">
            <Loading :listLoading.sync="loading"></Loading>
          </transition>
          <div class="portlet-title">
            <div class="caption">
              <i class="fa fa-globe"></i>{{this.title}}
            </div>
           <div class="cz">
              <button class="btn green" @click="addYgInfor">新增 <i class="fa fa-plus"></i></button>
            </div>
          </div>
          <div class="portlet-body">
            <div class="row color mbStyle">
              <div class="col-md-6 color">
                <div class="radio-list">
                    <label class="radio-inline" @click="leaderPe($event)">
                        <div class="radio" id="uniform-optionsRadios27">
                          <span >  <!-- :class="{'active':$index==0}" -->
                            <input type="radio" name="optionsRadios" checked="true" id="optionsRadios27" value="1">
                          </span>
                        </div>
                      <font><font  style="color: #333;font-weight: 500;"> 启用 </font></font>
                    </label>
                    <label class="radio-inline" @click="leaderPe($event)">
                      <div class="radio" id="uniform-optionsRadios28">
                        <span>
                          <input type="radio" name="optionsRadios" id="optionsRadios28"
                           value="0">
                        </span>
                      </div>
                      <font><font  style="color: #333;font-weight: 500;"> 禁用 </font></font>
                    </label>
                  
                  </div>
              </div>
            </div>
            <div class="tableDiv">
              <el-table
                :data="list"
                style="width: 100%">
          
                <el-table-column
                  label="序号"
                  :formatter="formatter">
                </el-table-column>
                <el-table-column
                  label="推送时间"
                  prop="area_name">
                </el-table-column>
                <el-table-column
                  label="推送对象"
                  prop="name">
                </el-table-column>
                <el-table-column
                  label="推送文本信息"
                  prop="status">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200">
                    <template scope="scope">
                      <el-button @click="lookData(scope.row,scope.$index)" class="look" type="text" size="small">编辑</el-button> |  
                      <el-button type="text"  data-toggle="modal" href="#delete" @click="deleteData(scope.row,scope.$index)" class="delete" size="small">删除</el-button>
                    </template>
                </el-table-column>
              </el-table>
              <div class="block">                    
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 15]"
                  :page-size="page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
      </div>
    </div>
     
    <!-- 发布抢单弹框开始 -->
    <div id="sureQd" class="modal fade" tabindex="-1" >
      <div class="modal-title">
        <p>
           发布抢单
        </p>
      </div>
      <div class="modal-body">
        <p style="color: #ff3300;font-weight: 500;">
            确定发布 公区报修事件  1001 为抢单，抢单时间为10分钟，在抢单时间内员工通过APP完成抢单操作。
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
        <button type="button" data-dismiss="modal" @click="sureDelete" class="btn blue">确定</button>
      </div>
    </div>
    <!-- 发布抢单弹框结束 -->

  </div>

</template>  

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.m10 .col-md-12 .col-md-2,.row .col-md-9{color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;top: -2px;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .row.m0{margin: 0;}
       .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}

     @media (max-width: 768px){
        
        .cz{margin-bottom: 0px;}
        .dataTotal{top: -5px;}
        .bs-select{width: 60%;}
      }
</style>
<style>
  .demo-table-expand {
    font-size: 0;
    }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
    }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
    }
  .el-table__expanded-cell{border-bottom: 0 !important;padding: 0;}
  .el-table__expanded-cell .el-table{border: 0;margin-bottom: 0;}
  .el-table__body-wrapper{overflow: hidden;}
</style>
<script>
  import Metronic from '../../../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../../../static/js/pages/tips.js';
  import optVue from '../../../../../config/optVue.js';
  import Loading from '../../../../../components/loading.vue';
  export default {
     data(){
      return{
        list:[],
        total:null, //总条数  
        lookObj:{},
        modifyNum:{},
        title:"",
        pageNum: null, //页数
        page_size: null, //每页显示多少条
        page_num: null, //当前页码
        number:0,
   
        id:null,
        currentPage:1,
        loading:false,
        total:0,
        multipleSelection: [],
        kw:"",
        options: [],
        loading:false
      }
    },
    components: {
        Loading
    },
    filters: {
      nodeTypeName: function(value) {
        return wbrwgl[value];
      }
    },
    mounted(){
      document.title = '计划模板管理';
      var that = this;
      this.title = document.title;
      optVue.pqxq(this);
      optVue.wbrwgl(this);
    },
    methods:{
      handleSizeChange(val) {
        var pageArr = {
          page_num:this.currentPage,
          page_size : val
        }

        this.pageFun(pageArr);
      },
      handleCurrentChange(val) {
        var pageArr = {
          page_num : val,
          page_size : this.page_size
        }

        this.loading = false;
        this.pageFun(pageArr);
      },
      pageFun:function(pageArr){

        this.loading = false;
        var that = this;
       
        setTimeout(function(){
          that.loading = true;
          optVue.jhmbglNowPag(that,pageArr);
        },that.loadTime)
      },
      addYgInfor:function(){
        this.$router.push({path:'/wbrwyqtsComonents', query: {type: 'add'}})
      },
      handleChange(val) { //下拉选择
        console.log(JSON.stringify(val));
      },
      deleteData:function (index,data,event) {
        this.data = data;
        this.index = index;
      
      },
      lookData:function(data,index){
        window.localStorage.setItem('collect_node_id', data.collect_node_id)
        this.$router.push({path:'/wbrwyqtsComonents', query: {type: 'update'}})
      },
     
      lookSb:function(data,index){
        this.lookObj = data.list[index]
      },
        saveData:function(){
        
      },
      sureDelete:function(){

      },
      tableRowClassName(row, index) {
          //把每一行的索引放进row
          row.index = index
      },
      formatter(row, column ,cellValue) {
          //放回索引值
          return (this.page_num-1)*this.page_size+row.index+1
      }, 
    
    }

  }

</script>  



